import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu, theme } from 'antd';
import React, { useState } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
type MenuItem = Required<MenuProps>['items'][number];

// 登录请求到数据之后 就可以和items这个数组进行匹配
const items: MenuItem[] = [
    {
        label: "栏目1",
        key:"/page1",
        icon:<PieChartOutlined /> ,
    },
    {
        label: "栏目2",
        key:"/page2",
        icon:<DesktopOutlined /> ,
    },
    {
        label: "栏目3",
        key:"page3",
        icon:<UserOutlined /> ,
        children:[
            {
                label: "栏目3.1",
                key:"/page3/page3.1",
            },
            {
                label: "栏目3.2",
                key:"/page3/page3.2",
            },
            {
                label: "栏目3.3",
                key:"/page3/page3.3",
            },
        ]
    },
    {
        label: "栏目4",
        key:"page4",
        icon:<TeamOutlined /> ,
        children:[
            {
                label: "栏目4.1",
                key:"/page4/page4.1",
            },
            {
                label: "栏目4.2",
                key:"/page4/page4.2",
            },
        ]
    },
    {
        label: "栏目5",
        key:"page5",
        icon:<FileOutlined /> ,
        children:[
            {
                label: "栏目5.1",
                key:"/page5/page5.1",
            },
            {
                label: "栏目5.2",
                key:"/page5/page5.2",
            },
        ]
    },
]

const Comp: React.FC = () => {
    const navigateTo = useNavigate()
    const currentRoute = useLocation()
    const {
        token: { colorBgContainer }, 
    } = theme.useToken();

    const menuClick = (e: { key: string }) => {
        // 点击跳转到对应的路由利用到一个hook
        navigateTo(e.key)
    }

    // 拿着currentRoute.pathname跟items数组的每一项与children的key做对比
    let firstOpenKey:string = ""
    // 在这里进行对比
    function findKey(obj:{key:string}){
        return obj.key === currentRoute.pathname
    }

    // 要对比的是多个children
    for(let i=0;i<items.length;i++){
        if(items[i]!['children'] && items[i]!['children'].length>0 &&  items[i]!['children'].find(findKey)){
            firstOpenKey = items[i]!.key as string
            break
        }
    }

    // 设置展开项目的初始值
    const [openKey, setOpenkey] = useState(["firstOpenKey"]);
    const handeleOpenChange = (keys: string[]) => {
        // 什么时候执行这个函数里面的代码?展开和回收某项菜单的时候执行这里的代码
        // keys是一个数组记录了当前那一项是展开的(用key来记录)

        // 把这个数组修改成最后一项,因为我只要一项是展开的 就是我刚点击的这一项
        setOpenkey([keys[keys.length - 1]])

    }
    return (
        <Menu
            theme="dark"
            // 表示当前选中下项的样式
            defaultSelectedKeys={[currentRoute.pathname]} mode="inline"
            items={items}
            onClick={menuClick}
            // 某项菜单展开和回收的事件  
            onOpenChange={handeleOpenChange}
            // 当前菜单展开项的key数组
            openKeys={openKey}
        />
    )
}

export default Comp;